<template>
  <div>
    <header-friendCircle :left-arrow="leftArrow" :fixed="fixed" :title="title" @onClickRight="writeCicle"></header-friendCircle>
    <div class="content-top margin-top-46">
      <img class="circle-bg" src="./../../assets/img/head_1.jpeg" />
      <div class="user">
        <span>阿呆</span>
        <img src="./../../assets/img/head_1.jpeg" height="80" width="80" />
      </div>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<!--    <van-list class="margin-bottom-20">-->
<!--      <van-cell :border="border" :center="center">-->
<!--        <div class="display-flex padding-bottom-10" >-->
<!--          <div class="friendCircle_left">-->
<!--            <img src="./../../assets/img/head_1.jpeg"/>-->
<!--          </div>-->
<!--          <div class="friendCircle_right">-->
<!--            <div class="name font-size-16">轻舞飞扬</div>-->
<!--            <div class="content font-size-14">这个是我发表的内容哈哈哈哈hahahhahahahhh啊哈哈哈哈哈哈好</div>-->
<!--            <div class="content_img">-->
<!--              <img src="./../../assets/img/head_1.jpeg"/>-->
<!--            </div>-->
<!--            <div class="nav-button">-->
<!--              <div class="float-left clear">-->
<!--                <span class="friendCircle_time chat-gery-l">1小时前</span>-->
<!--                &lt;!&ndash;            <span class="friendCircle_time chat-gery-l">删除</span>&ndash;&gt;-->
<!--              </div>-->
<!--              <div class="float-right">-->
<!--                <span class="margin-right-10">-->
<!--                    <van-icon-->
<!--                      slot="icon"-->
<!--                      :class="icon_like"-->
<!--                      :color="color.open"-->
<!--                      :size="icon_size"-->
<!--                    >-->
<!--                    </van-icon>-->
<!--                  <span class="comment-button">赞</span>-->
<!--                </span>-->
<!--                <span>-->
<!--                    <van-icon-->
<!--                      slot="icon"-->
<!--                      :class="icon_comment"-->
<!--                      :color="color.open"-->
<!--                      :size="icon_size"-->
<!--                    ></van-icon>-->
<!--                  <span class="comment-button">评论</span>-->
<!--                </span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="clear">-->
<!--              <div class="bg-grey padding-left-5 padding-right-5 like-list">-->
<!--                <van-icon-->
<!--                slot="icon"-->
<!--                :class="icon_like"-->
<!--                :color="color.open"-->
<!--                :size="icon_size"-->
<!--                ></van-icon>-->
<!--                <span class="font-size-14 chat-blur">张三,李四</span>-->
<!--              </div>-->
<!--              <div class="bg-grey padding-left-5 padding-right-5">-->
<!--                  <div>-->
<!--                    <span class="font-size-14 chat-blur">阿呆:</span>-->
<!--                    <span class="font-size-14">不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看不错很好看</span>-->
<!--                  </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </van-cell>-->
<!--    </van-list>-->

      <van-list class="margin-bottom-20" @load="onload">
        <van-cell :border="border" :center="center" v-for="(item,index) in circles" :key="index">
          <div class="display-flex padding-bottom-10" >
            <div class="friendCircle_left">
              <img src="./../../assets/img/head_1.jpeg"/>
            </div>
            <div class="friendCircle_right">
              <div class="name font-size-16">{{item.nickName}}</div>
              <div class="content font-size-14">{{item.content}}</div>
              <div class="content_img" v-if="item.fileList">
                <van-uploader v-model="item.fileList"
                              disabled
                              :deletable=false
                              :show-upload=false
                              :max-count="9"
                              :preview-size="86"

                />
              </div>
              <div class="nav-button">
                <div class="float-left clear">
                  <span class="friendCircle_time chat-gery-l">1小时前</span>
                  <!--            <span class="friendCircle_time chat-gery-l">删除</span>-->
                </div>
                <div class="float-right">
                  <span class="margin-right-10" @click="likeSubmit(item.id,index)">
                      <van-icon
                        slot="icon"
                        :class="icon_like"
                        :color="item.currentUserIsLike==1?color.open:color.close"
                        :size="icon_size"
                      >
                      </van-icon>
                    <span class="comment-button">赞</span>
                  </span>
                  <span @click="initCommentData(item.id,index)">
                      <van-icon
                        slot="icon"
                        :class="icon_comment"
                        :color="color.open"
                        :size="icon_size"
                      ></van-icon>
                    <span class="comment-button">评论</span>
                  </span>
                </div>
              </div>
              <div class="clear" v-if="(item.comments !==undefined && item.comments.length>0) || (item.like!==undefined && item.like.length>0)">
                <div class="bg-grey padding-left-5 padding-right-5 like-list" v-if="item.like.length>0">
                  <van-icon
                    slot="icon"
                    :class="icon_like"
                    :color="color.open"
                    :size="icon_size"
                  ></van-icon>
                  <span class="font-size-14 chat-blur" v-for="(like,i) in item.like">{{like.nickName}}<span v-if="i!=item.like.length-1">，</span></span>
                </div>
                <div class="bg-grey padding-left-5 padding-right-5" v-if="item.comments.length>0">
                  <div v-for="comment in item.comments" @click="initReplyData(item.id,comment.commentId,comment.nickName,index)">
                    <span class="font-size-14 chat-blur" v-if="comment.replyId==null">{{comment.nickName}}:</span>
                    <span class="font-size-14 chat-blur" v-if="comment.replyId!=null">{{comment.nickName}}<span class="color-gray">&nbsp;回复&nbsp;</span>{{comment.replyNickName}}:</span>
                    <span class="font-size-14">{{comment.content}}</span>
                    <span class="font-size-12 chat-blur" v-if="$user.id==comment.commentId" @click.stop="deleteComment(comment.id,index)"> 删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <div class="talk-foot bg-nav vertical-center" v-if="showCommentInput">
        <van-field
          v-model="comment"
          rows="1"
          :autosize="autosize"
          type="textarea"
          :class="textareaStyle"
          @input="inputComment()"
          :placeholder="placeholder"
        />
        <van-icon  class="iconfont icon_face margin-left-10" color="#333333" size="22"></van-icon>
        <van-button slot="right" color="#09BB07" size="normal" class="send-button" :disabled="disabled" @click="commentSubmit()">发送</van-button>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

<script>
  import HeaderFriendCircle from '../common/header-friendCircle'
  import { Cell, PullRefresh  ,ActionSheet,Toast,List ,Dialog   } from 'vant';
  import Vue from 'vue';
  import { Field } from 'vant';
  import { Button  } from 'vant';
  Vue.use(Cell).use(PullRefresh);
  Vue.use(ActionSheet ).use(List).use(Field).use(Button).use(Toast).use(Dialog );
  import friendCircleService from "./friendCircle-service.js"

    export default {
        name: "friendCircle",
        components:{
          HeaderFriendCircle
        },
        data(){
            return{
              //是否显示边框
              border:true,
              center:true,
              likeColor:"#558FF2",
              color:{
                open:"#558FF2",
                close:"#AFABA7"
              },
              autosize:{
                maxHeight: 92,
                minHeight: 28 ,
              },
              $user:null,
              textareaStyle:'textarea',
              icon_like:"iconfont icon_like_open",
              icon_comment:"iconfont icon_pinlun",
              icon_size:18,
              //是否显示返回箭头
              leftArrow:false,
              // 是否固定顶部
              fixed:true,
              title:"朋友圈",
              isLoading:false,
              show:false,
              actions: [
                { name: '发表心情' ,subname: '无图'},
                { name: '拍摄', subname: '照片或视频' },
                { name: '从相册选择' },

              ],
              circles:[],
              page:1,
              pageSize:10,
              //评论可编辑状态
              disabled:true,
              showCommentInput:false,
              placeholder:"评论:",
              //点赞
              likeContent:{
                circleId:"",
                commentId:"",
                type:1
              },
              //评论
              commentContent:{
                circleId:"",
                commentId:"",
                content:"",
                type:2
              },
              //回复
              replyContent:{
                circleId:"",
                commentId:"",
                replyId:"",
                content:"",
                type:3
              },
              commentData:{

              },
              //评论内容
              comment:"",
              //操作第几条朋友圈内容
              index:0,
            }
        },
      methods:{
        writeCicle:function () {
          console.log("朋友圈顶部子组件调用父组件这个方法"),
            this.show=true;
        },
        onCancel:function () {
          this.show = false;
          Toast('cancel');
        },
        onSelect:function (item) {
          this.show = false;
          this.$router.push('/circleText')

        },
        //初始化朋友圈
        initCircle:function () {
          var data={
            page:this.page,
            pageSize: this.pageSize
          }
          friendCircleService.friendCircles(data).then(result =>{
            let res = result.data;
            if(res.code == '0'){
              this.circles=res.result;
              this.circles.forEach(it =>{
                var images=[]
                if(it.image!=null && it.image.length>0){
                  var imageList = it.image.split(",");
                  imageList.forEach(item =>{
                    images.push({
                      url:item
                    })
                  })
                  it.fileList=images
                }
              })
              console.log("列表====》",JSON.stringify(this.circles))
            }
          }).catch(err => {

          }).finally(()=>{

          })
        },
        //上拉加载数据 加载之前的数据
        onload:function () {
            this.page++;
            var data={
              page:this.page,
              pageSize: this.pageSize
            }
            friendCircleService.friendCircles(data).then(result =>{
              let res = result.data;
              if(res.code == '0'){
                if(res.result.length>0) {
                  this.circles=this.circles.concat(res.result);
                }else{
                  this.page--
                }
              }
            }).catch(err => {
              this.page--
            }).finally(()=>{

            })
        },
        //下拉刷新数据 加载最新的数据
        onRefresh:function () {

        },
        inputComment:function(){
          console.log('评论框内容变化触发');
          if(this.comment.length>0){
            this.disabled=false;
          }else{
            this.disabled=true;
          }
        },
        //评论初始化提交数据
        initCommentData:function (circleId,index) {
          this.comment="";
          this.showCommentInput=true;
          this.placeholder="评论:";
          this.commentData={
            circleId:circleId,
            commentId:this.$user.id,
            content:"",
            type:2
          }
          this.index=index
        },
        //初始化回复数据
        initReplyData:function (circleId,replyId,nickName,index) {
          this.showCommentInput=true;
          this.placeholder="回复"+nickName+":";
          this.commentData={
            circleId:circleId,
            commentId:this.$user.id,
            replyId:replyId,
            content:"",
            type:3
          }
          this.index=index
        },
        //点赞
        likeSubmit:function(circleId,index){
          this.commentData={
            circleId:circleId,
            commentId:this.$user.id,
            type:1
          }
          this.submitData(this.commentData,index);
          this.index=index;
        },
        //评论和回复,点赞 提交
        commentSubmit:function(){
          this.commentData.content=this.comment;
          console.log(JSON.stringify(this.commentData));
          this.submitData(this.commentData);
        },
        submitData(data){
          friendCircleService.comments(data).then(result =>{
            let res = result.data;
            if(res.code == '0'){
              console.log("第几条数据!:"+this.index);
              console.log("评论成功!:"+JSON.stringify(result));
              this.commentData={};
              this.showCommentInput=false;
              //修改 评论点赞 列表 中的值(更新朋友圈信息)
              if(res.result.type==1){
                if(res.result.isShowLike==1){
                  //点赞则直接push
                  this.circles[this.index].like.push(res.result);
                  this.circles[this.index].currentUserIsLike=1;
                }else{
                  //取消点赞则先查出这个人在点在列表中的位置 再删除这条点赞信息
                  var likeIndex = this.circles[this.index].like.findIndex( item => item.commentId == res.result.commentId);
                  console.log("likeIndex:"+likeIndex);
                  this.circles[this.index].like.splice(likeIndex,1)
                  this.circles[this.index].currentUserIsLike=2;
                }

              }else{
                this.circles[this.index].comments.push(res.result);
              }

            }else{
              //异常
              Toast.fail(res.msg);
            }
          })
          //   .catch(err => {
          //   //异常
          //   Toast('评论异常');
          // }).finally(()=>{
          //
          // })
        },
        //删除评论
        deleteComment:function (id,index) {
          Dialog.confirm({
            title: '提示',
            message: '确认删除?'
          }).then(() => {
            var data={
              id:id
            }
            friendCircleService.deleteComment(data).then(result =>{
              let res = result.data;
              if(res.code == '0'){
                console.log("删除成功!:"+JSON.stringify(res));
                this.commentData={};
                this.showCommentInput=false;
                var commentsIndex = this.circles[index].comments.findIndex( item => item.id == id);
                console.log("commentsIndex:"+commentsIndex);
                this.circles[index].comments.splice(commentsIndex,1)
              }else{
                //异常
                Toast.fail(res.msg);
              }
            }).catch(err => {
              //异常
              console.log(err);
              Toast('评论异常');
            }).finally(()=>{

            })
          }).catch(() => {
            // on cancel
          });
        }
      },
      mounted() {
        this.$user=JSON.parse(localStorage.getItem('user'));
        this.initCircle();
      }
    }
</script>

<style scoped>

  .friendCircle_left img{
    width: 36px;
    height: 36px;
    border-radius: 3px;
  }

  .friendCircle_right{
    font-size: 16px;
    /* font-family: sans-serif; */
    font-weight: inherit;
    margin-left: 8px;
    width: 100%;
  }

  .content_img img{
    margin-top: 10px;
    width: 86px;
    height: 86px;

  }
  .name{
    font-weight: bold;
    color: #558FF2;
  }

  .friendCircle_time{
    font-size: 12px;
  }
  .comment-button{
    font-size: 12px;
  }

  .van-cell{
    /*padding: 10px 10px;*/
  }

  .like-list{
    border-bottom:1px solid #EEEBE9;
  }


/*顶部样式*/
  .content-top{
    position: relative;
  }
  .circle-bg{
    width: 100%;
    margin-bottom: 20px;
    height: 260px;
  }
  .user{
    position: absolute;
    bottom: 0px;
    right: 10px;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .user span{
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20px;
    margin-right: 14px;
  }
  .user img{
    border-radius: 5px;
    margin-right: 16px;
  }
  .textarea{
    width: 70%;
    margin-left: 5px;
    padding: 0;
  }
  /*使用 scoped 如果无法改变 vant 中的样式  可以使用 >>> 深度选择器符号 */
  .textarea >>> .van-field__control{
    padding: 2px 2px;
    font-size: 14px;
  }

  .textarea >>> textarea{
    height: 32px!important;
  }
  .send-button{
    height: 28px;
    width: 52px;
    line-height: 26px;
    padding: 0;
    margin-left: 6px;
  }
  .van-uploader >>> .van-uploader__upload{
    display:none
  }
</style>
